<script setup lang="ts">
import { ref } from "vue";
let type = ref(1);
import emojiList from "@/assets/emoji.json";
import heoList from "@/assets/heo.json";
const $emits = defineEmits(['changeEmoji']);
const handleChangeType = (typeId) => {
  type.value = typeId;
};

const handleSelect = (url)=>{
    $emits("changeEmoji",url);
}   
</script>

<template>
  <el-card class="emoji-container">
    <div class="content">
      <ul v-if="type === 1">
        <li v-for="item in emojiList" :key="item.name" :title="item.name" @click="handleSelect(item.url)">
          <img :src="item.url" alt="" />
        </li>
      </ul>
      <ul v-if="type === 2">
        <li v-for="item in heoList" :key="item.name" :title="item.name" @click="handleSelect(item.url)">
          <img :src="item.url" alt="" />
        </li>
      </ul>
      <el-upload :show-file-list="false" list-type="picture-card" v-show="type===3">
        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
    <el-button-group>
      <el-button
        :type="type === 1 ? 'primary' : ''"
        @click="handleChangeType(1)"
        >表情</el-button
      >
      <el-button
        :type="type === 2 ? 'primary' : ''"
        @click="handleChangeType(2)"
        >heo</el-button
      >
      <el-button
        :type="type === 3 ? 'primary' : ''"
        @click="handleChangeType(3)"
        >收藏</el-button
      >
    </el-button-group>
  </el-card>
</template>

<style scoped lang="scss">
.emoji-container {
  max-width: 400px;
  .content {
    min-height: 150px;
    max-height: 150px;
    max-width: 400px;
    overflow-y: auto;
    &::-webkit-scrollbar {
        display: none;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    li {
      cursor: pointer;
      display: inline-block;
      margin-bottom: 20px;
      img {
        width: 30px;
        height: 30px;
        padding: 3px;
      }
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 28px;
      height: 28px;
      text-align: center;
    }
    :deep .el-upload--picture-card {
        width: 75px;
        height: 75px;
    }
  }
}
</style>
